<template>
  <!-- FB设置 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="queryForm" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="分享链接:" label-width="80px">
            <el-select class="width280" v-model="listQuery.id" placeholder="请选择渠道" filterable clearable>
              <el-option :label="item.share_url" :value="item.id" v-for="(item, index) in fbTwoDataList" :key="index"></el-option>
            </el-select>
          </el-form-item> -->
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="main_agent_name" label="主渠道" width="200">
            <template slot-scope="scope">
              <span v-show="scope.row.main_agent_id">【{{scope.row.main_agent_id}}】{{ scope.row.main_agent_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_fb" label="是否是FB" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_fb?'success':'info'">{{ scope.row.is_fb?'是':'否' }}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="share_url" label="分享链接" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" :disabled="!scope.row.share_url" @click.stop="shareUrl(scope.row)">分享链接</el-button>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="appsflyer" label="appsflyer" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.appsflyer?'success':'info'">{{ scope.row.appsflyer?'是':'否' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="app_id" label="APP_id" width="180"/>
          <el-table-column align="center" prop="dev_key" label="dev_key" width="180"/>
          <el-table-column align="center" prop="fb_id" label="FB_id" width="180"/>
          <el-table-column align="center" prop="fb_token" label="FB_token" width="240" show-overflow-tooltip/>
          <el-table-column align="center" prop="share_url" label="分享链接" width="240" show-overflow-tooltip/>
          <el-table-column align="left" fixed="right" prop="operation" label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'user.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)" icon="el-icon-edit-outline" />
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem"/>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getFB
} from '@/api/system'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'

export default {
  name: 'facebook',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      dataList:[],
      fbTwoDataList:[],
      channelData: this.$store.state.commonState.channelShowDataArray,
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
        agent_id:'',
        id:'',
      },
    }
  },
  created () {
    // this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelShowDataArray
    this.getDataList()
  },
  methods: {
    // 获取FB列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.fbTwoDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getFB(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
          that.fbTwoDataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 查询
    queryForm(){
      let that = this,params=that.listQuery;
      if(params.id){
        that.dataList=[]
        that.currentTotal=1
        that.fbTwoDataList.forEach(item=>{
          if(params.id==item.id){
            that.dataList.push(item)
          }
        })
      }else{
        that.getDataList(true)
      }
    },
    // 分享链接
    shareUrl(row) {
      window.open(row.share_url)
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.isShowDetails = true
      that.checkedItem = row
      that.handleCurrentChange(row)
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      this.isShowChannelDetails = false
      if (show) {
        this.getDataList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        agent_id:'',
        id:'',
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
